<template>
  <u-popup
    :show="visible"
    mode="bottom"
    mask="true"
    bg-color="transparent"
    @close="close"
  >
    <view class="flex flex-y">
      <view class="cloud-adopt-wrapper">
        <cloudAdoptView
          :pet-info="petInfo"
          :step="step"
          @paySuccess="paySuccess"
          @payFail="close"
        ></cloudAdoptView>
      </view>
    </view>
  </u-popup>
</template>

<script>
import cloudAdoptView from './cloudAdoptView.vue';
export default {
  components: {
    cloudAdoptView,
  },
  props: {
    value: {
      type: Boolean,
      value: false,
    },

    petInfo: {
      type: Object,
      value: () => {},
    },
    step: {
      type: String,
      value: '0',
    },
    isMinePage: {
      type: Boolean,
      value: false,
    },
  },
  data() {
    return {
      showCert: false,
    };
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
  },
  watch: {
    visible: {
      immediate: true,
      handler(newVal, oldVal) {
        if (newVal && this.isMinePage) {
          uni.hideTabBar();
        } else {
          uni.showTabBar();
        }
      },
    },
  },
  methods: {
    close() {
      this.visible = false;
    },
    paySuccess(data) {
      this.$emit('paySuccess', data);
      this.close();
    },
  },
};
</script>

<style lang="scss">
.u-popup {
  z-index: 1000; /* 确保这个值高于tabBar的z-index */
}
.cloud-adopt-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
}
</style>
